<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Kafka WebSocket Visualization (Semester Class Gender)</title>
    <script src="https://cdn.socket.io/4.6.1/socket.io.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.2/dist/echarts.min.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }

       .container {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
        }

       .chart-container {
            width: 100%;
            height: 400px;
        }
    </style>
</head>
<body>
    <h1>Kafka WebSocket Visualization (Semester Class Gender)</h1>

    <div class="container">
        <!-- 图表: 不同学期各个班级的男女的人数 (柱状图) -->
        <div class="chart-container" id="semester-class-gender-bar-chart"></div>
    </div>

    <script>
        const socket = io('http://localhost:5000');

        // 全局累计数据
        const cumulativeData = {
            semesterClassGender: {} // { semester: { class: { male: count, female: count } } }
        };

        // 初始化 ECharts 图表实例
        const semesterClassGenderBarChart = echarts.init(document.getElementById('semester-class-gender-bar-chart'));

        // 图表配置
        const semesterClassGenderBarChartOption = {
            title: { text: '不同学期各个班级的男女人数 (累计)', left: 'center' },
            tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
            legend: { top: 'bottom' },
            xAxis: { type: 'category', data: [] }, // 班级列表
            yAxis: { type: 'value' },
            series: [] // 按学期的系列数据
        };
        semesterClassGenderBarChart.setOption(semesterClassGenderBarChartOption);

        // 累计数据处理函数
        socket.on('kafka-message', (message) => {
            const parsedMessage = JSON.parse(message.data);
            const introduction = parsedMessage.introduction;
            const result = parsedMessage.result;

            if (introduction.includes('统计不同学期各个班级的男女的人数')) {
                const entries = result.split(';').map(entry => {
                    const match = entry.match(/Semester: (\d+), Class: ([^,]+), Gender: ([^,]+), Count: (\d+)/);
                    if (match) {
                        const semester = match[1];
                        const className = match[2];
                        const gender = match[3];
                        const count = parseInt(match[4], 10);

                        if (!cumulativeData.semesterClassGender[semester]) {
                            cumulativeData.semesterClassGender[semester] = {};
                        }
                        if (!cumulativeData.semesterClassGender[semester][className]) {
                            cumulativeData.semesterClassGender[semester][className] = { male: 0, female: 0 };
                        }
                        cumulativeData.semesterClassGender[semester][className][gender] += count;
                    }
                });

                const semesters = Object.keys(cumulativeData.semesterClassGender);
                const classes = [...new Set(Object.values(cumulativeData.semesterClassGender)
                   .flatMap(obj => Object.keys(obj)))];

                const series = semesters.map(semester => ({
                    name: `学期 ${semester}`,
                    type: 'bar',
                    stack: 'total', // 同一班级堆叠数据
                    emphasis: { focus: 'series' },
                    data: classes.map(className => {
                        const classData = cumulativeData.semesterClassGender[semester][className] || {};
                        const maleCount = classData.male || 0;
                        const femaleCount = classData.female || 0;
                        return maleCount + femaleCount; // 将男女人数合并
                    })
                }));

                semesterClassGenderBarChartOption.xAxis.data = classes;
                semesterClassGenderBarChartOption.series = series;
                semesterClassGenderBarChart.setOption(semesterClassGenderBarChartOption);
            }
        });
    </script>
</body>
</html>